<template>
  <div class="blueberrycomment">
  	<tabs :value="value" @getIndex="getCurrentIndex">
      <tab v-for="(element,index) in blueberrypaiData" :label="element.type" :index="index+1" :key="index" >
        <div class="blueberrypailist">
          <ul class="list">
            <router-link tag="li" to="/details" class="list-li" v-for="(item,index) in element.blueBerryJam" :key="index">
              <div class="comm">
                <img :src="item.img" alt="">
                <span>{{item.title}}</span>
              </div>
            </router-link>
          </ul>
        </div>
      </tab>
    </tabs>
  </div>
</template>

<script>


export default {
  name: 'BlueberryComment',
  data(){
  	return{
  	}
  },
  props:{
  	value:{
  		type:[String,Number],
  		default:"1"
  	},
  	blueberrypaiData:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  },
  methods:{
    getCurrentIndex(index){
      this.value = index
    }
  }
}
</script>

<style lang="css"  scoped> 
  .blueberrypailist{
    margin:0 0 0 0.18rem;
  }
  .list-li{
    width: 45%;
    float: left;
    margin-top: 0.15rem;
    margin-right: 0.15rem;
  }
  .comm{
    position: relative;
  }
  .comm span{
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    background: #8C8B87;
    padding: 0.05rem 0.1rem;
    color: #fff;
    opacity: 0.8;
    border-radius: 0.05rem;
  }
</style>